<template>
  <div id="#blogsback">
    <div class="m-content">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/home">博客首页</el-menu-item>
        <el-submenu index="2">
          <template #title>留言板</template>
          <el-menu-item index="/liuyan/liuyan">查看留言</el-menu-item>
          <el-menu-item index="/music/music">听听音乐</el-menu-item>
        </el-submenu>
        <el-menu-item index="/mine/mine">我的简历</el-menu-item>
          <el-menu-item index="/user/user">后台管理</el-menu-item>
        <el-menu-item index="/login">登录</el-menu-item>
      </el-menu>
    </div>
    <div class="back">
      <div id="my-card">
        <el-card shadow="always" body-style="padding:0px">
          <p id="star">每颗星星都会以自己的方式闪耀着</p>
        </el-card>
      </div>
      <div class="weizhi">
        <div class="size" v-if="!show">
          <img src="../../assets/img/4.png" />
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          content="点击添加我的微信"
          placement="left"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiaozhizuomoban" @click="isshow"></use>
          </svg>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="1252629263"
          placement="left"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-QQ"></use>
          </svg>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="查看我的博客"
          placement="left"
        >
          <svg class="icon" aria-hidden="true" @click="toCsdn">
            <use xlink:href="#icon-csdn"></use>
          </svg>
        </el-tooltip>
      </div>
      <div class="block">
        <el-timeline
          style="margin: 50px auto; max-width: 960px; margin-left: -50px"
        >
          <el-timeline-item
            :timestamp="m.s.blog_date"
            placement="top"
            v-for="(m, index) in this.listData"
            :key="index"
          >
            <el-card @click.native="send(m.s.blog_id)">
              <h4 class="text">{{ m.s.blog_title }}</h4>
              <h4>{{ m.s.blog_content }}</h4>
              <p>
                <span class="el-icon-user-solid"> {{ m.user_name }}</span>
                <span class="el-icon-view" style="padding-left: 20px">
                  {{ m.s.blog_views }}</span
                >
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
//import a from "../../assets/js/yinghua";
import { all,views,select, del, sort } from "../../api/blogapi";
export default {
  name: "home",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      show: true,
      listData: [],
      listDatas: [],
    };
  },
  components: {},
  created() {
    this.getdata();
  },
  methods: {
    handleSelect(key, keyPath) {
    
    },
    toCsdn() {
      window.open("http://128x.cn/", "blank");
    },
    isshow() {
      this.show = !this.show;
    },

    getdata() {
      all().then((res) => {
        //this.listData = res.slice(0, 5);
        this.listData = res;
        for (var i = 0; i <= this.listData.length; i++) {
          this.listData[i].s.blog_date = this.GetDateFormat(
            this.listData[i].s.blog_date
          );
        }
      });
    },
    GetDateFormat(str) {
      return new Date(parseInt(str.substr(6, 13))).toLocaleDateString();
    },
    send(id) {
    views(id).then((res)=>{

        this.$router.push({ path: "/blog/blogshow", query: { id: id } });
      })
     
    },
  },
  computed: {},
};
</script>
<style  scoped>
#blogsback {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 960px;
  /*overflow:hidden;*/
}
.m-content {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
}
.el-menu-demo {
  max-width: 960px;
  text-align: center;
  margin: 0 auto;
}
.back {
  position: relative;
  width: 960px;
  height: 300px;
  background-image: url("../../assets/img/1.jpg");
  background-size: cover;
  background-repeat: repeat-x;
  margin: 0 auto;
}
.icon {
  width: 2em;
  height: 2em;
  fill: currentColor;
  overflow: hidden;
}
.item {
  padding-left: 35px;
}
.weizhi {
  padding-top: 250px;
}
#my-card .el-card {
  position: absolute;
  width: 300px;
  text-align: center;
  top: 30%;
  background-color: #ffd400;
}
#my-card .el-card:hover {
  opacity: 0.8;
  transform: scale(1.1);
  transition: all 1s ease 0s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.size {
  margin-top: -120px;
  position: absolute;
}
.size img {
  width: 10%;
  height: 10%;
}
.text {
  font-size: 20px;
  color: rgb(103, 101, 247);
}
.zuobian {
  font-size: 10px;
  padding-left: 10px;
}
</style>